<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-table/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">

            <ul class="nav nav-underline" id="msgType">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active text-dark-emphasis"
                            type="button" data-type="0" role="tab">全部消息
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link text-dark-emphasis"
                            type="button" data-type="1" role="tab">通知
                        <span class="badge text-bg-warning align-text-bottom">4</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link text-dark-emphasis"
                            type="button" data-type="2" role="tab">私信
                    </button>
                </li>
            </ul>
            <div class="d-flex flex-wrap gap-2 my-3">
                <button class="btn btn-outline-info btn-sm">删除</button>
                <button class="btn btn-outline-info btn-sm">标记已读</button>
                <button class="btn btn-outline-info btn-sm">全部已读</button>
            </div>
            <table id="table"></table>
        </div>
    </div>
</div>

<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->

<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="../lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>
<script>
    $(function () {


        //默认0代表全部
        let msgType = 0;

        $('#msgType').on('click', 'button', function () {
            msgType = $(this).attr('data-type');

            //移除所有的active类
            $('#msgType button').removeClass('active');
            //给当前button添加激活类
            $(this).addClass('active');

            $('#table').bootstrapTable('refresh');
            // $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
        })


        $('#table').bootstrapTable({
            //配置语言
            locale: 'zh-CN',
            //设置高度，就可以固定表头，用户体验良好
            height: 380,
            //请求地址
            url: '/user',
            responseHandler: function (res) {
                return res.data;
            },
            //是否开启分页
            pagination: true,
            //是客户端分页还是服务端分页  'client','server',由于演示没有后端提供服务，所以采用前端分页演示
            sidePagination: 'client',
            // 初始化加载第一页，默认第一页
            pageNumber: 1,
            //可供选择的每页的行数 - (亲测大于1000存在渲染问题)
            pageList: [5, 10, 25, 50, 100],
            //在上百页的情况下体验较好 - 能够显示首尾页
            paginationLoop: true,
            // 展示首尾页的最小页数
            paginationPagesBySide: 2,
            // 唯一ID字段
            uniqueId: 'id',
            // 每行的唯一标识字段
            idField: 'id',
            // 是否启用点击选中行
            clickToSelect: false,
            // 请求得到的数据类型
            dataType: 'json',
            // 请求方法
            method: 'get',


            // 总数字段
            totalField: 'total',
            // 当字段为 undefined 显示
            undefinedText: '-',
            // 排序方式
            sortOrder: "asc",

            // 按钮的类
            buttonsClass: 'outline-secondary',
            // 类名前缀
            buttonsPrefix: 'btn',

            // 图标前缀
            iconsPrefix: 'bi',
            // 图标大小 undefined sm lg
            iconSize: undefined,
            // 图标的设置  这里只做了一个演示，可设置项目参考 https://examples.bootstrap-table.com/#options/table-icons.html
            icons: {
                fullscreen: 'bi-arrows-fullscreen',
            },

            //params是一个对象
            queryParams: function (params) {
                return {
                    // 每页数据量
                    limit: params.limit,
                    // sql语句起始索引
                    offset: params.offset,
                    page: (params.offset / params.limit) + 1,
                    // 排序的列名
                    sort: params.sort,
                    // 排序方式 'asc' 'desc'
                    sortOrder: params.order,
                    // 消息类型
                    msgType: 1,
                }
            },
            //列
            columns: [
                {
                    checkbox: true,
                    //是否显示该列
                    visible: true,
                },
                {
                    title: '标题内容',
                    field: 'name',
                    align: 'center'
                },
                {
                    title: '加入时间',
                    field: 'create_at',
                    align: 'center',
                }
            ]
        });
    });
</script>
</body>
</html>